import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as actions from '../../actions'
import BScroll from 'better-scroll'

class Sou extends Component {

    state = {
        page: 0,
        pageNum: 10
    }

    componentDidMount() {
        this.props.data_List(this.state.page, this.state.pageNum)

        setTimeout(() => {

            this.bs = new BScroll('.scroll', {
                probeType: 3,
                pullUpLoad: {
                    threshold: 60,
                },
                scrollY: true,
                pullDownRefresh: true,
                click: true
            })

            this.bs.on('pullingUp', () => {

                this.setState({
                    page: this.state.page + 1
                }, () => {

                    this.props.data_List(this.state.page, this.state.pageNum)

                    this.bs.refresh()

                    this.bs.finishPullUp()

                })

            }, 2000)

        }, 200)
    }

    render() { 
        let { dataList } = this.props
        return (
            <div className='scroll' style={{overflow: 'hidden', height: '100%'}}>
                <ul>
                    {
                        dataList && dataList.length ? dataList.map((item,index) => {
                            return (
                                <li key={index}>
                                    <img src={item.img} alt='' />
                                    <p>{item.name}</p>
                                </li>
                            )
                        }) : ''
                    }
                </ul>
            </div>
        )
    }
}
 
let mapStateToProps = ({ dataReducer }) => {
    return {
        ...dataReducer
    }
}

let mapDispatchToProps = (dispatch) => bindActionCreators(actions, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)(Sou)